<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>loadmore-jsonp</title>
    <style>
      .item {
          border: 1px solid #fff;
          background: #F0F8FF;
          padding: 5px;
          margin-top: 5px;
      }
      .button {
        border: 1px solid #CCC;
        padding: 5px;
        margin-top: 5px;
        cursor: pointer;
        background: #eee;
       }
       .button:hover{
          background: #ddd;
        }  
    </style>
</head>
<body>
    <div class="ct">
        <div class="item">这是已有内容0</div>
        <div class="button add-more" data-ready=1>加载更多</div>
    </div>
    <script src="https://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
        var LEN = 3;
        var ready  = true;

        $('.add-more').on('click',function(){
            var me  = this,
                start = $(this).index();
            if(!ready){
                return;
            }
            ready  = false;
            $(this).text('loading...');
            $.ajax({
                url: 'http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/29-jquery%20ajax/code/getMoreItemJsonp.php',
                type: 'GET',
                dataType: 'jsonp',
                data: {
                    start: start,
                    len: LEN
                },
                success: function(data) {
                /**
                 *  data = {status: 'success', items: ['内容1','内容2','内容3']};
                 */
                    if( data && data.status === 'success') {
                        var items = data.items;
                        for(var i=0;i < items.length;i++) {
                            $(me).before('<div class="item">'+ items[i] + '</div>');
                        }
                    }else {
                        alert('error');
                    }
                },
                error: function() {
                    alert('error');
                },
                complete: function(){
                    ready = true;
                    $(me).text('加载更多');
                }

            })
        })
    </script>
</body>
</html>